<script setup lang="ts">
defineComponent({
  name: 'BlogDialog'
})
const ModalRef = ref(null)
const ModalMainRef = ref(null)
const $emit = defineEmits(['moduleValue'])
const props = defineProps({
  width: {
    type: String,
    default: '200px'
  },
  height: {
    type: String,
    default: '200px'
  }
})
const closeModel = (event: any) => {
  const e = event || window.event
  // 点击的位置在 ModalMainRef 中 不关闭
  if (ModalMainRef.value && ModalMainRef.value === e.target) {
    // 如果点击的是模态外部，则关闭模态
    ModalMainRef.value.close()
  }
}
const openModel = () => {
  if (ModalMainRef.value) ModalMainRef.value.showModal()
}

onMounted(() => {
  ModalRef.value.style.display = 'block'
  ModalMainRef.value.addEventListener('click', closeModel)
})

onBeforeUnmount(() => {
  ModalMainRef.value.removeEventListener('click', closeModel)
})
defineExpose({
  openModel
})
</script>

<template>
  <dialog class="modal-main" ref="ModalMainRef">
    <div class="modal" ref="ModalRef" :style="{width: width, height: height}">
        对话框
    </div>
  </dialog>
</template>

<style scoped lang="scss">
.modal-main {
  border-radius: 10px;
  border: none;
  /*灰色边框阴影*/
  box-shadow: 0 0 10px #000;
  left: 50%;
  top: 50%;
  animation: show 0.3s;
  transform: translate(-50%, -50%);
  /*不可以选中*/
  user-select: none;
  padding: 6px;
  outline: none;
  .modal {
    background: #fff;
  }

  @keyframes show {
    0% {
      transform-origin: 10px 10px;
      opacity: 0;
      transform: scale(0) translate(-50%, -50%);
    }
    100% {
      transform-origin: 10px 10px;
      opacity: 1;
      transform: scale(1) translate(-50%, -50%);
    }
  }
}

.open {
  display: block;
}
</style>
